const classNames = require('classnames')
const { listParentBehavior, listItemBehavior } = require('../behaviors')
const _ = require('../utils')

_.create('list', {
  options: { multipleSlots: true },

  behaviors: [listParentBehavior],

  properties: {
    title: { type: String, value: '' },
    padded: { type: Boolean, value: false },
    bordered: { type: Boolean, value: true },
  },

  relations: {
    listItem: {
      // type: 'descendant',
      type: 'child',
      target: listItemBehavior,

      linked(target) {
        // eslint-disable-next-line no-console
        console.info('List linked >', target.is)
        this.assignElementSN('listItem')
      },
      linkChanged() {
        this.assignElementSN('listItem')
      },
      unlinked() {
        this.assignElementSN('listItem')
      },
    },
  },

  computed: {
    classes(data) {
      const { classPrefix, bordered, padded, title } = data
      const classes = classNames(classPrefix, {
        [`${classPrefix}-bordered`]: bordered,
        [`${classPrefix}-padded`]: padded,
        [`${classPrefix}-no-title`]: !title,
      })

      return classes
    },
  },
})
